<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
import ExpressionPicker from './ExpressionPicker.vue'

import type { StatisticalIndicator } from '@/types/modules/statistical-indicator'

const props = defineProps<{
  isAdd: boolean
}>()
const info = defineModel<StatisticalIndicator>({
  required: true,
})
const expressionPickerRef1
  = ref<InstanceType<typeof ExpressionPicker>>()
const expressionPickerRef2
  = ref<InstanceType<typeof ExpressionPicker>>()
const [error1, setError1] = useState(false)
const [error2, setError2] = useState(false)

// 新增情况下，默认勾选“计算公式”
function initExpressionType() {
  const expressionType = unref(info).expressionType
  if (expressionType.length === 0 && props.isAdd) {
    info.value.expressionType = [1]
  }
}

async function validate() {
  return new Promise((resolve) => {
    // 计算公式
    if (unref(info).expressionType.includes(1)) {
      if (
        unref(info).calculationalExpression.length === 0
      ) {
        const isValid
          = expressionPickerRef1.value?.validate(
            '请输入计算公式',
          )
        resolve(isValid)
        return
      }
    }
    // 统计公式
    if (unref(info).expressionType.includes(2)) {
      if (unref(info).statisticalExpression.length === 0) {
        const isValid
          = expressionPickerRef2.value?.validate(
            '请输入统计公式',
          )
        resolve(isValid)
        return
      }
    }

    resolve(true)
  })
}

// 重新勾选或取消”公式“
function handleChangeExpressionType() {
  nextTick(() => {
    setError1(false)
    setError2(false)
  })
}

onMounted(() => {
  initExpressionType()
})

defineExpose({
  validate,
})
</script>

<template>
  <div class="padding-xs indicator-expression">
    <ElDescriptions title="指标基本信息" :column="2" border>
      <ElDescriptionsItem label="用能单元">
        {{ info.pointName
        }}{{
          info.pointCode ? `（${info.pointCode}）` : ''
        }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="指标名称">
        {{ info.indicatorName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="指标编码">
        {{ info.indicatorNumber }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="计量单位">
        {{ info.unitName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="采集点点位">
        {{ info.indicatorCode }}
      </ElDescriptionsItem>
    </ElDescriptions>
    <div
      class="align-center margin-top-sm flex"
      style="margin-bottom: 16px"
    >
      <div class="el-descriptions__title">
        使用公式
      </div>
      <ElTooltip
        placement="top"
        content="取消公式后，请更新对应的数据存储的选择。"
      >
        <ElIcon><InfoFilled /></ElIcon>
      </ElTooltip>
    </div>
    <ElCheckboxGroup
      v-model="info.expressionType"
      style="--el-checkbox-height: 23px"
      @change="handleChangeExpressionType"
    >
      <ElCheckbox label="计算公式" :value="1" />
      <ElCheckbox label="统计公式" :value="2" />
    </ElCheckboxGroup>
    <template v-if="info.expressionType.includes(1)">
      <div
        class="el-descriptions__title margin-top-sm"
        style="margin-bottom: 16px"
      >
        计算公式
      </div>
      <ExpressionPicker
        ref="expressionPickerRef1"
        v-model="info.calculationalExpression"
        v-model:error="error1"
        :type="1"
      />
    </template>
    <template v-if="info.expressionType.includes(2)">
      <div
        class="el-descriptions__title margin-top-sm"
        style="margin-bottom: 16px"
      >
        统计公式
      </div>
      <ExpressionPicker
        ref="expressionPickerRef2"
        v-model="info.statisticalExpression"
        v-model:error="error2"
        :type="2"
      />
    </template>
  </div>
</template>

<style lang="scss" scoped>
.indicator-expression {
  :deep(.el-descriptions__table td) {
    &:nth-child(2n) {
      min-width: 230px;
    }
  }
}
</style>
